<template>
  <div>
    <a-table
      :columns="wxColumns"
      :data-source="accountDataTable.totalDataList"
      :scroll="{ x: 1500 }"
      :pagination="{ pageSize: 5}"
    >
      <template slot="article" slot-scope="text, record">
        <div :style="{color: color ? '#fff' : '#0F69EB'}">
          {{record.title || '--'}}
          </div>
      </template>
      <template slot="shareUser" slot-scope="text, record">
        <span>{{text}}</span><span style="display: inline-block; margin: 0 5px">/</span><span>{{record.shareCount | dataFormat}}</span>
      </template>
      <template slot="favUser" slot-scope="text, record">
        <span>{{text}}</span><span style="display: inline-block; margin: 0 5px">/</span><span>{{record.favCount | dataFormat}}</span>
      </template>
      <template slot="pageReadCount" slot-scope="text">
        <span>{{text | dataFormat}}</span>
      </template>
      <template slot="feedReadUser" slot-scope="text, record">
        <span>{{text}}</span><span style="display: inline-block; margin: 0 5px">/</span><span>{{record.feedReadCount | dataFormat}}</span>
      </template>
      <template slot="friendsReadUser" slot-scope="text, record">
        <span>{{text}}</span><span style="display: inline-block; margin: 0 5px">/</span><span>{{record.friendsReadCount | dataFormat}}</span>
      </template>
      <template slot="feedShareFeedUser" slot-scope="text, record">
        <span>{{text}}</span><span style="display: inline-block; margin: 0 5px">/</span><span>{{record.feedShareFeedCnt | dataFormat}}</span>
      </template>
      <template slot="kanyikanReadUser" slot-scope="text, record">
        <span>{{text}}</span><span style="display: inline-block; margin: 0 5px">/</span><span>{{record.kanyikanReadCount | dataFormat}}</span>
      </template>
      <template slot="souyisouReadUser" slot-scope="text, record">
        <span>{{text}}</span><span style="display: inline-block; margin: 0 5px">/</span><span>{{record.souyisouReadCount | dataFormat}}</span>
      </template>
      <template slot="feedShareSessionUser" slot-scope="text, record">
        <span>{{text}}</span><span style="display: inline-block; margin: 0 5px">/</span><span>{{record.feedShareSessionCnt | dataFormat}}</span>
      </template>
    </a-table>
  </div>
</template>

<script>
  export default {
    name: "WxTable",
    props: ['accountDataTable', 'color'],
    data() {
      return {
        wxColumns: [
          {
            title: '文章标题',
            dataIndex: 'article',
            scopedSlots: { customRender: 'article' },
            width: 210
          },
          {
            title: '分享的人数/次数',
            dataIndex: 'shareUser',
            scopedSlots: { customRender: 'shareUser' },
            width: 140
          },
          {
            title: '收藏的人数/次数',
            dataIndex: 'favUser',
            scopedSlots: { customRender: 'favUser' },
            width: 140
          },
          {
            title: '阅读次数',
            dataIndex: 'pageReadCount',
            scopedSlots: { customRender: 'pageReadCount' },
            width: 120
          },
          // { title: '阅读次数(千)', dataIndex: 'pageReadCount', width: 100 },
          {
            title: '朋友圈阅读人数/次数',
            dataIndex: 'feedReadUser',
            scopedSlots: { customRender: 'feedReadUser' },
            width: 170
          },
          {
            title: '好友转发阅读人数/次数',
            dataIndex: 'friendsReadUser',
            scopedSlots: { customRender: 'friendsReadUser' },
            width: 180
          },
          {
            title: '转发朋友圈人数/次数',
            dataIndex: 'feedShareFeedUser',
            scopedSlots: { customRender: 'feedShareFeedUser' },
            width: 170
          },
          {
            title: '看一看来源阅读人数/次数',
            dataIndex: 'kanyikanReadUser',
            scopedSlots: { customRender: 'kanyikanReadUser' },
            width: 200
          },
          {
            title: '搜一搜来源阅读人数/次数',
            dataIndex: 'souyisouReadUser',
            scopedSlots: { customRender: 'souyisouReadUser' },
            width: 200
          },
          {
            title: '公众号会话转发朋友圈人数/次数',
            dataIndex: 'feedShareSessionUser',
            scopedSlots: { customRender: 'feedShareSessionUser' },
            width: 240
          },
        ],
        tableBg: '',
        tableColor: '',
        tableBorder: '',
        tableHover: '',
      }
    },
    created() {
      if (this.color) {
        this.tableBg = 'transparent';
        this.tableColor = '#fff';
        this.tableBorder = 'rgba(255, 255, 255, 0.1)';
        this.tableHover = 'transparent !important'
      } else {
        this.tableBg = '#F7F8FA';
        this.tableColor = '#999';
        this.tableBorder = '#F0F2F5';
        this.tableHover = '#e6f7ff';
      }
    },
    methods: {
    }
  }
</script>

<style scoped lang="less">
@tableBg: v-bind(tableBg);
@tableColor: v-bind(tableColor);
@tableBorder: v-bind(tableBorder);
@tableHover: v-bind(tableHover);

::v-deep .ant-table-tbody > tr:hover > td {
  background: transparent !important;
}
::v-deep .ant-table-thead > tr > th,::v-deep .ant-table-tbody > tr > td {
  text-align: center;
}
::v-deep .ant-table-thead > tr > th {
  background: @tableBg;
  color: @tableColor;
  font-size: 14px;
  border-bottom: 1px solid @tableBorder;
}
::v-deep .ant-table-tbody > tr > td{
  border-bottom: 1px solid @tableBorder;
  color: @tableColor;
}
</style>